<template>
    <div class="row list-panel">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <ol class="breadcrumb">
                        <li><a>财务管理</a></li>
                        <li><a>财务统计</a></li>
                        <li><a>销量统计</a></li>
                    </ol>
                </div>
                <div class="content-wrapper">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px" size="small">
                        <el-form-item label="商品分类">
                            <el-select v-model="formInline.region" placeholder="" style="width:177px">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="已取消" value="0"></el-option>
                                <el-option label="待付款" value="1"></el-option>
                                <el-option label="待发货" value="2"></el-option>
                                <el-option label="待自提" value="3"></el-option>
                                <el-option label="已完成" value="4"></el-option>
                                <el-option label="已退款" value="5"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="团名称">
                            <el-select v-model="formInline.region" placeholder="" style="width:177px">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="已取消" value="0"></el-option>
                                <el-option label="待付款" value="1"></el-option>
                                <el-option label="待发货" value="2"></el-option>
                                <el-option label="待自提" value="3"></el-option>
                                <el-option label="已完成" value="4"></el-option>
                                <el-option label="已退款" value="5"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="退款日期">
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date1" style="width: 100%;"></el-date-picker>
                            </el-col>
                            <el-col class="line" :span="2" style="text-align: center">-</el-col>
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date1" style="width: 100%;"></el-date-picker>
                            </el-col>
                        </el-form-item>

                        <el-form-item style="float: right;">
                            <a class="revision-btn" href="javaScript:void(0)" @click="onSubmit()">搜 索</a>
                        </el-form-item>
                    </el-form>
                    <div class="page-panel helping--panel">
                        <h3 class="page-panel-title"> 柱状统计
                        </h3>
                        <div class="page-panel-cont">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="ibox float-e-margins" style="padding:0px;padding-top:20px;">
                                        <div class="ibox-title">
                                            <h5>订单</h5>
                                            <div class="pull-right">
                                                <div class="btn-group"> <button type="button" class="btn btn-xs btn-white active">天</button>
                                                    <button type="button" class="btn btn-xs btn-white">月</button>
                                                    <button type="button" class="btn btn-xs btn-white">年</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ibox-content">
                                            <div class="row">
                                                <div class="col-sm-9">
                                                    <div class="flot-chart">
                                                        <!-- <div class="flot-chart-content" id="flot-dashboard-chart"></div> -->
                                                        <bar-chart :chart-data="order_info"></bar-chart>
                                                    </div>
                                                </div>
                                                <div class="col-sm-3">
                                                    <ul class="stat-list">
                                                        <li>
                                                            <h2 class="no-margins">2,346</h2> <small>退款总金额</small>
                                                            <div class="progress progress-mini">
                                                                <div style="width: 48%;" class="progress-bar"></div>
                                                            </div>
                                                        </li>
                                                        <li>
                                                            <h2 class="no-margins ">4,422</h2> <small>近一个月退款</small>
                                                            <div class="progress progress-mini">
                                                                <div style="width: 60%;" class="progress-bar"></div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h3 class="page-panel-title"> 列表统计
                    </h3>
                    <template v-if="data != null">
                        <el-table ref="multipleTable" :data="data.list" tooltip-effect="dark" :border="true"
                                  :header-cell-style="{'background-color': '#F5F5F6'}" class="list-table"
                            max-height="600" style="width: 100%">
                            <template v-for="columnName in columnNames">
                                <template>
                                    <el-table-column :key="columnName.prop" :label="columnName.label"
                                                     align="center" :prop="columnName.prop">
                                    </el-table-column>
                                </template>
                            </template>
                            <el-table-column label="操作" width="200" align="center">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small">查看详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <el-pagination style="float: right;margin-top: 10px" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" :current-page.sync="data.currPage" :page-size="data.pageSize"
                        layout="total, prev, pager, next" :total="data.totalCount">
                    </el-pagination>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import BarChart from "@/components/echart/saleschart.vue";
    export default {
        name: 'SalesAnalysis',
        components: {
            BarChart
        },
        data() {
            return {
                formInline: {
                    user: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                },
                columnNames: [{
                    label: '序号',
                    prop: 'refundNumber',
                    width: 120
                }, {
                    label: '团名称',
                    prop: 'user.realName',
                    width: 120
                }, {
                    label: '商品分类',
                    prop: 'user.mobile',
                    width: 120
                }, {
                    label: '退款金额(元)',
                    prop: 'totalAmount',
                    width: 100
                }, {
                    label: '退款日期',
                    prop: 'status',
                    width: 88
                }],
                multipleSelection: [],
                data: {},
                query: {
                    page: ''
                },
                order_info: {
                    date: [1, 2, 3, 4, 5, 6, 7, 8],
                    value: [12, 33, 44, 32, 53, 12, 45, 29, 87, 77, 46, 22, 9, 33]
                }
            }
        },
        mounted: function() {
            this.listAllRefund();
        },
        methods: {
            onSubmit() {
            },
            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
                this.query.page = val;
                this.listAllRefund();
            },
            async listAllRefund() {
                let res = await this.$api.get('/mall/orderrefund/list', this.query);
                if (res.code === 0) {
                    this.data = res.page;
                } else {
                    this.$message.error(res.msg);
                }
            }
        }
    }
</script>

<style scoped>
    .list-panel .content-wrapper /deep/ .el-form-item__label {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #666;
        font-size: 12px;
        font-weight: normal;
    }
    .list-table{
        font-size: 12px;
    }
</style>
